<template>
  <!-- 表单 -->
  <el-form label-width="80px">
    <!-- 第一行 -->
    <el-row>
      <!-- 学科 -->
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-form-item label="学科">
            <el-select v-model="subject" placeholder="请选择">
              <el-option
                v-for="item in allSubject"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                @click.native="catalogueSimple(item.value)"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-col>
      <!-- 二级目录 -->
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-form-item label="二级目录">
            <el-select v-model="twoLevelDirectory" placeholder="请选择">
              <el-option
                v-for="item in allTwoLevelDirectory"
                :key="item.id"
                :label="item.directoryName"
                :value="item.id"
                @click.native="getCatalogID(item.id)"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-col>
      <!-- 标签 -->
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-form-item label="标签">
            <el-select v-model="isLabel" placeholder="请选择">
              <el-option
                v-for="item in allLabel"
                :key="item.id"
                :label="item.tagName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-col>
      <!-- 关键字 -->
      <el-col :span="6"
        ><div class="grid-content bg-purple-light">
          <el-form-item label="关键字">
            <el-input v-model="keyword" placeholder="根据题干搜索"></el-input>
          </el-form-item></div
      ></el-col>
    </el-row>
    <!-- 第二行 -->
    <el-row>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-form-item label="题目类型">
            <el-select v-model="isQuestionType" placeholder="请选择">
              <el-option
                v-for="item in allQuestionType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-form-item label="难度">
            <el-select v-model="isDifficulty" placeholder="请选择">
              <el-option
                v-for="item in allDifficulty"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-form-item label="方向">
            <el-select v-model="isDirection" placeholder="请选择">
              <el-option
                v-for="item in direction"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-form-item label="录入人">
            <el-select v-model="isUser" placeholder="请选择" style="width: 234px">
              <el-option
                v-for="item in allUser"
                :key="item.id"
                :label="item.username"
                :value="item.id"
                @click.native="getCreatorID(item.id)"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-col>
    </el-row>
    <!-- 第三行 -->
    <el-row>
      <el-col :span="6"
        ><div class="grid-content bg-purple-light">
          <el-form-item label="题目备注">
            <el-input v-model="topicRemarks" style="width: 221px"></el-input>
          </el-form-item></div
      ></el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple-light">
          <el-form-item label="企业简称">
            <el-input v-model="enterpriseAbbreviation" style="width: 221px"></el-input>
          </el-form-item></div
      ></el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-form-item label="城市">
            <!-- 城市下拉框 -->
            <el-select v-model="cities" placeholder="请选择" style="width: 46.5%">
              <el-option
                v-for="item in allCities"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <span>&nbsp;</span>
            <!-- 区县下拉框 -->
            <el-select v-model="area" placeholder="请选择" style="width: 46.5%">
              <el-option
                v-for="item in allArea"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="6" class="hmmm_wrapper">
        <el-button @click="clearAllData">清除</el-button>
        <el-button @click="searchFind" type="primary">搜索</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { subjectSimpleAPI } from '@/api/hmmm/subjects.js'
import { catalogueListAPI } from '@/api/hmmm/directorys.js'
import { labelListAPI } from '@/api/hmmm/tags.js'
import { list } from '@/api/base/users.js'
export default {
  data() {
    return {
      // 第一行------------
      allSubject: [], // 全部学科
      subject: '', // 选中的学科
      allTwoLevelDirectory: [], // 二级目录
      twoLevelDirectory: '', // 选中的二级目录
      allLabel: [], // 标签
      isLabel: '', // 选中的标签
      // 第二行------------------
      allDifficulty: difficulty, // 难度
      isDifficulty: '', // 选中的难度
      allQuestionType: questionType, // 试题类型
      isQuestionType: '', // 选中的类型
      direction: direction, // 方向
      isDirection: '', // 选中的方向
      allUser: [], // 所有录入人
      isUser: '', // 选中的录入人
      // 第三行------------------
      keyword: '', // 关键字
      topicRemarks: '', // 题目备注
      enterpriseAbbreviation: '', // 企业简称
      allCities: [], // 全部城市
      cities: '', // 选中的城市
      allArea: [], // 全部市区
      area: '', // 选中的市区
      // 其他-----------------
      subjectID: '', // 学科ID
      isCreatorID: '', // 获取录入人ID
      isCatalogID: '' // 获取目录ID
    }
  },
  watch: {
    // 城市联动
    cities(newV) {
      this.area = ''
      this.allArea = citys(newV)
    }
  },
  created() {
    this.allCities = provinces() // 城市联动
    this.subjectSimple() // 调用获取学科目录API
    this.getUser() // 获取录入人
  },
  methods: {
    // 学科目录
    async subjectSimple() {
      const { data } = await subjectSimpleAPI()
      this.allSubject = data
    },
    // 二级学科目录 and 标签
    async catalogueSimple(id) {
      this.subjectID = id
      this.twoLevelDirectory = '' // 选中的二级目录
      this.isLabel = '' // 选中的标签
      // 处理二级学科目录
      const { data } = await catalogueListAPI({ subjectID: id })
      this.allTwoLevelDirectory = data.items
      // 处理标签
      const { data: res } = await labelListAPI({ subjectID: id })
      this.allLabel = res.items
    },
    // 录入人
    async getUser() {
      const { data } = await list()
      this.allUser = data.list
    },
    // 清空
    clearAllData() {
      this.subject = '' // 选中的学科
      this.twoLevelDirectory = '' // 选中的二级目录
      this.isLabel = '' // 选中的标签
      this.keyword = '' // 关键字
      this.isDifficulty = '' // 选中的难度
      this.isQuestionType = '' // 选中的类型
      this.isDirection = '' // 选中的方向
      this.isUser = '' // 选中的录入人
      this.topicRemarks = '' // 题目备注
      this.enterpriseAbbreviation = '' // 企业简称
      this.cities = '' // 选中的城市
      this.area = '' // 选中的县区
      this.allTwoLevelDirectory = [] // 置空二级目录
      this.allSubject = []
      this.subjectSimple()
      this.allLabel = []
      this.$emit('clickTwo')
    },
    // 搜索
    searchFind() {
      const obj = {
        subjectID: this.subjectID, // 学科ID
        difficulty: this.isDifficulty, // 难度
        questionType: this.isQuestionType, // 试题类型
        tags: this.isLabel, // 标签名称
        province: this.cities, // 企业所在地省份
        city: this.area, // 企业所在城市
        keyword: this.keyword, // 关键字
        remarks: this.topicRemarks, // 题目备注
        shortName: this.enterpriseAbbreviation, // 企业简称
        direction: this.isDirection, // 方向
        creatorID: this.isCreatorID, // 录入人ID
        catalogID: this.isCatalogID // 目录ID
      }
      console.log(obj, 1)
      this.$emit('click', obj)
    },
    // 获取录入人ID
    getCreatorID(id) {
      this.isCreatorID = id
    },
    // 获取目录ID
    getCatalogID(id) {
      this.isCatalogID = id
    }
  }
}
</script>

<style scoped>
.hmmm_wrapper {
  display: flex;
  justify-content: flex-end;
}
</style>
